<template>
	<view :class="$attrs" class="bg-white radius-8 mx-16 px-16 py-12 mb-12" style="box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.05);">
		<view class="flex justify-between item-center mb-12">
			<text class="text-color-regular fs-16 text-bold">常用功能</text>
		</view>
		<view style="display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px 0;">
			<view v-for="(menu,i) in menus" :key="i" class="flex-col center" @click="onMenuClick(menu)">
				<button v-if="menu.type === 'button'" :open-type="menu.openType" class="flex-col center px-0" style="background-color:transparent;border:none;">
					<image class="mb-4 w-24 h-24" :src="menu.icon"></image>
					<text class="text-color-hint fs-12 leading-17">{{menu.title}}</text>
				</button>
				<template v-else>
					<image class="mb-4 w-24 h-24" :src="menu.icon"></image>
					<text class="text-color-hint fs-12">{{menu.title}}</text>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { useUserStore } from '@/stores/modules/user.js'
	import couponIcon from '@/static/svg/mine/menu-coupon.svg'
	import serviceIcon from '@/static/svg/mine/menu-service.svg'
	import feedbackIcon from '@/static/svg/mine/menu-feedback.svg'
	import collectionIcon from '@/static/svg/mine/menu-collection.svg'
	import settingIcon from '@/static/svg/mine/menu-setting.svg'
	
	const userStore = useUserStore()
	const menus = ref([
		{
			title: '我的卡券',
			icon: couponIcon,//'../../../static/svg/mine/menu-coupon.svg',
			path: '/pagesA/my-coupon/my-coupon'
		},
		{
			title: '官方客服',
			icon: serviceIcon,//'../../../static/svg/mine/menu-service.svg',
			type: 'button',
			openType: 'contact'
		},
		{
			title: '反馈与建议',
			icon: feedbackIcon,//'../../../static/svg/mine/menu-feedback.svg',
			path: '/pagesA/feedback/feedback'
		},
		{
			title: '收藏与浏览',
			icon: collectionIcon,//'../../../static/svg/mine/menu-collection.svg',
			path: '/pagesA/favorites-browsing/favorites-browsing'
		},
		{
			title: '设置',
			icon: settingIcon,//'../../../static/svg/mine/menu-setting.svg',
			path: '/pagesA/settings/settings'
		},
	])
	
	const onMenuClick = (menu) => {
		if (!userStore.isLogin) {
			uni.navigateTo({
				url: `/pagesA/login/login?from=${encodeURIComponent('/pages/home/home?tab=4')}`
			})
			return
		}
		if (menu && menu.path) {
			uni.navigateTo({
				url: menu.path
			})
		}
	}
</script>
